<template>
<!--  <el-pagination
      v-model:current-page="props.pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 4, 6, 8]"
      :small="false"
      :background="false"
      layout="total, sizes, prev, pager, next"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />-->
  <el-pagination
      v-model:current-page="props.pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 4, 6, 8]"
      :small="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="props.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>

import {ref, onBeforeMount} from 'vue'
import http from "@/axios";

// 定义属性：父向子传值 <PageMenu pageNum="3" pages="8"></PageMenu>
let props = defineProps(['pageNum', 'total'])
const pageSize = ref(4)

// @click:名字：click 触发事件的效果:点击鼠标
// @keydown:名字：keydown 触发效果:按下键盘

// 定义事件名字：子向父传值 <PageMenu @pageUp="" @pageDown=""></PageMenu>
// 在父组件内绑定事件
const emits = defineEmits(["select", "pageDown"])

const handleSizeChange = (size: number) => {
  emits('select', [props.pageNum, size])
}
const handleCurrentChange = (num: number) => {
  emits('select', [num, pageSize.value])
}

// 点击上一页按钮，调用函数up，触发了父组件内的pageUp事件
onBeforeMount(() => {
  emits('select', [1, pageSize.value])
})

</script>

<style scoped>
.a {
  border: 2px solid blue;
}
</style>